<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="js/bootstrap.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <!--<style>-->
        <!--div{-->
            <!--border: solid;-->
        <!--}-->
    <!--</style>-->
    <style>
        .div_nav1,.div_b{
            color: white;
            background-color:#27AE60 ;
        }
        .div_nav1 a,.div_b a{
            color: white;
        }
        .div_div2{
            padding-top: 1%;
            padding-bottom:1%;;
            border: #C2CCD1 solid 1px;
        }
        .div_div2:hover{
            background-color: #C2CCD1;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row div_nav1">
        <div class="row" style="margin-top: 3%">
            <div class="col-md-1 col-sm-1 col-xs-1"></div>
            <div class="col-md-2 col-sm-2 col-xs-2">BootCDN</div>
            <div class="col-md-6 col-sm-6 col-xs-6"></div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <div class="">
                    <ul class="list-inline">
                        <li><a>API</a></li>
                        <li><a>博客</a></li>
                        <li><a>关于</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row" style="margin-bottom: 10%">
            <div class="col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-md-6 col-sm-6 col-xs-6">
                <div class="row text-center">
                    <h1 style="text-shadow:5px 5px 5px #239C56">BOOTCDN</h1>
                    <p>稳定、快速、免费的前端开源项目 CDN 加速服务</p>
                    <p>共收录了 3382 个前端开源项目</p>
                </div>
                <div class="row input-group">
                    <input style="padding:4%" type="text" class="form-control" placeholder="搜索开源库,例如：jquery">
                    <span class="input-group-addon"><button class="glyphicon glyphicon-search "></button></span>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <!--<ul class="list-inline ">-->
                <!--<li><a href="#"><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px"></a></li>-->
                <!--<li><a><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px;"></a></li>-->
                <!--<li><a><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px"></a></li>-->
                <!--<li><a><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px"></a></li>-->
                <!--<li><a><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px"></a></li>-->
                <!--<li><a><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px"></a></li>-->
                <!--<li><a><img src="images/angular-icon.svg" class=".img-rounded" style="width: 30px"></a></li>-->
            <!--</ul>-->
        </div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
    </div>
    <div class="row" style="margin-top: 3%">
        <div class="col-md-9 col-sm-9 col-xs-9"></div>
        <div class="col-md-2 col-sm-2 col-xs-2">
            <p><a>拒绝流量劫持，全面使用HTTPS！</a></p>
        </div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col-md-10 col-sm-10 col-xs-10">
            <div class="row div_div2">
                <div class="col-md-3">
                    <h4>bootstrap</h4>
                </div>
                <div class="col-md-9">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                </div>
                <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12" style="color: #555555">
                    <span class="glyphicon glyphicon-star"></span>12345
                </div>
            </div>
            <div class="row div_div2">
                <div class="col-md-3">
                    <h4>bootstrap</h4>
                </div>
                <div class="col-md-9">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                </div>
                <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12" style="color: #555555">
                    <span class="glyphicon glyphicon-star"></span>12345
                </div>
            </div>
            <div class="row div_div2">
                <div class="col-md-3">
                    <h4>bootstrap</h4>
                </div>
                <div class="col-md-9">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                </div>
                <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12" style="color: #555555">
                    <span class="glyphicon glyphicon-star"></span>12345
                </div>
            </div>
            <div class="row div_div2">
                <div class="col-md-3">
                    <h4>bootstrap</h4>
                </div>
                <div class="col-md-9">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                </div>
                <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12" style="color: #555555">
                    <span class="glyphicon glyphicon-star"></span>12345
                </div>
            </div>
            <div class="row div_div2" style="text-align: center;color: #34ce57">
                <p>所有的开源列表</p>
            </div>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-1"></div>
        <div class="row">
        </div>
    </div>
    <div class="row div_b" style="margin-top: 10%">
        <div class="col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <p>关于 BootCDN</p>
            <p>BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。</p>
            <p>自2013年10月31日上线以来已经为30多万家网站提供了稳定、可靠的免费 CDN 加速服务。</p>
            <p>反馈或建议请发送邮件至：cdn@bootcss.com</p>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col-md-3 col-sm-3 col-xs-3">
            <h4>友情链接</h4>
            <ul class="list-inline">
                <li><a>Bootstrap中文网</a></li>
                <li><a>Bootstrap中文网</a></li>
                <li><a>Bootstrap中文网</a></li>
            </ul>
            <ul class="list-inline">
                <li><a>Bootstrap中文网</a></li>
                <li><a>Bootstrap中文网</a></li>
                <li><a>Bootstrap中文网</a></li>
            </ul>
            <ul class="list-inline">
                <li><a>Bootstrap中文网</a></li>
                <li><a>Bootstrap中文网</a></li>
                <li><a>Bootstrap中文网</a></li>
            </ul>
        </div>
        <div class="col-md-3 col-sm-2 col-xs-2">
            <h4>我们用到的技术</h4>
            <ul class="list-inline">
                <li><a>Bootstrap</a></li>
                <li><a>Ghost</a></li>
            </ul>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-1"></div>
    </div>
</div>
</body>
</html>